<template>
	<div class="frame-page h-panel">
		<div class="h-panel-bar">
			<span class="h-panel-title">表单配置</span>
			<div class="h-panel-right"><Button color="primary" @click="doEdit(0)"><span class="icon tianjia1"></span> 新增表单</Button></div>
		</div>
		<div class="h-panel-bar">
			<div class="search-filter-wrap">
				<span class="search-picker-title">搜索</span>
				<Search :width="400" v-model="filter.keyword" @search="getData()" showSearchButton></Search>
			</div>
		</div>
		<div class="h-panel-body">
			<Table :loading="loading" :datas="datas">
				<TableItem :width="80" prop="id" align="center" title="编号"></TableItem>
				<TableItem :width="300" prop="name" align="center" title="表单名称"></TableItem>
				<TableItem :width="150" align="center" title="修改时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.update_time)}}
					</template>
				</TableItem>
				<TableItem :width="150" align="center" title="创建时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.create_time)}}
					</template>
				</TableItem>
				<TableItem :width="100" align="center" title="操作" fixed="right">
					<template slot-scope="{data}">
						<button class="h-btn h-btn-s h-btn-blue" title="编辑" @click="doEdit(data.id)"><i class="icon bianji"></i></button>
						<button class="h-btn h-btn-s h-btn-red" title="删除" @click="doDelete(data.id)"><i class="icon shanchu"></i></button>
					</template>
				</TableItem>
			</Table>
			<p></p>
			<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getData(false)" />
		</div>
		<Modal v-model="openEdit" :closeOnMask="false">
			<Edit @close="openEdit=false" :id="id"></Edit>
		</Modal>
	</div>
</template>

<script>
import Edit from './edit';
export default {
	components : {
		Edit
	},
	data() {
		return {
			id : 0,
			openEdit : false,
			pagination: {
				page: 1,
				size: 20,
				total: 0
			},
			datas: [],
			loading: false,
			filter: {
				keyword : ''
			}
		};
	},
	mounted() {
		this.getData()
	},
	methods: {
		async getData(reload = true) {
			if (reload) {
				this.pagination.page = 1
			}
			this.loading = true
			let data = await this.$api('GET','form',Object.assign(this.filter,{page:this.pagination.page,pageSize:this.pagination.size}))
			this.datas = data.data
			this.pagination.total = data.total
			this.loading = false
		},
		doEdit (id){
			this.id = id
			this.openEdit = true
		},
		async doDelete (id,istrue=false){
			if(istrue){
				let res = 0
				res = await this.$api('DELETE','form/'+id)
				if(res){
					this.datas.forEach((item,index) => {
						if(item.id == id){
							this.datas.splice(index,1)
						}
					})
				}
			}else{
				this.$Confirm('确定删除？').then(() => {
					this.doDelete(id,true)
				}).catch(() => {})
			}
		}
	}
};
</script>

<style lang='less'>

</style>